<template>
    <div>
		<uni-list>
			<uni-list-item title="原手机号" :text="original_phone" :showArrow="false"></uni-list-item>
			<uni-list-item title="新手机号" :custom="true">
				<input type="tel" v-model="new_phone" placeholder="请输入新手机号码"  />
			</uni-list-item>
			<uni-list-item title="短信验证码" :custom="true">
				<view class="custom-box-code">
					<input type="number" v-model="code" placeholder="请输入短信验证码"  />
					<button plain hover-class="button-hover2" v-if="isSend == 0"  size="small"   @click="sendcode" class="getcode">获取验证码</button>
					<button plain  size="small"   v-if="isSend == 1" class="showcode">{{keepTime}}s</button>
				</view>
			</uni-list-item>
		</uni-list>
        <button class="setting_btn" @click="confirmchange">确认提交</button>
    </div>
</template>

<script>
import uniList from '@/components/uni-list/uni-list.vue'
import uniListItem from '@/components/uni-list-item/uni-list-item.vue'

import { mobileReg } from '@/utils/tools/validate'
import { getBasicUser, getUser } from '@/utils/auth'

import { sendcode, changephone } from '@/api/setting'

export default {
	name: 'changePhone',
	components: {
		uniList,
		uniListItem
	},
	data() {
		return {
			title: '修改手机号码',
			original_phone: '',
			new_phone: '',
			code: '',
			isSend: 0,
			keepTime: 59,
			userInfo: ''
		}
	},
	onLoad(option) {
	    let thta = this
		thta.optin = option
		this.userInfo = this.$store.getters.getUser
		this.original_phone = this.userInfo.mobile_phone || this.userInfo.contact_phone
	},
	methods: {
		// 获取验证码
		sendcode() {
			if (this.new_phone == '') {
				uni.showToast({
					title: '请输入手机号码',
					icon: 'none'
				})
			} else if (!mobileReg.test(this.new_phone)) {
				uni.showToast({
					title: '手机号码不对，请重新输入',
					icon: 'none'
				})
			} else {
				let data = {
					mobile: this.new_phone
				}
				sendcode(data).then(res => {
					if (res.status === 'success') {
						console.log(res)
						this.code = res.data.result.code
						this.isSend = 1
						this.countDown()
					} else {
						uni.showToast({
							title: res.errors.message,
							icon: 'none'
						})
					}
				})
			}
		},
		// 倒计时
		countDown() {
			this.intervalBtn = setInterval(() => {
				if (this.keepTime <= 0) {
					// 重置btn提示信息
					this.btnMsg = '点击发送验证码'
					// 清除定时器
					clearInterval(this.intervalBtn)
					// 更改btn状态
					this.countFlag = !this.countFlag
					// 重置倒计时状态
					this.keepTime = 0
					this.isSend = 0
				} else {
					this.isSend = 1
				}
				// 倒计时
				this.keepTime--
			}, 1000)
		},
		confirmchange() {
		    let that = this
			if (that.new_phone == '') {
				uni.showToast({
					title: '请输入新的手机号码',
					icon: 'none'
				})
			} else if (that.code == '') {
				uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				})
			} else {
				let data = {
					old_mobile: that.original_phone,
					new_mobile: that.new_phone,
					captcha: that.code
				}
				changephone(data).then(res => {
					if (res.status === 'success') {
						uni.showToast({
							title: '手机号码修改成功',
							icon: 'none'
						})
						// 更新vuex资料
						getBasicUser(that.userInfo.user_id, true)
						getUser(true).then(res => {
							uni.navigateBack()
						})
					} else {
						uni.showToast({
							title: res.errors.message,
							icon: 'none'
						})
					}
				})
			}
		}
	}
}
</script>

<style scoped lang="scss">
	.custom-box-code{
		display: flex;
		justify-content: space-around;
		align-items: center;
		input{
			flex: 1;
		}
		button{
			color: #ff6900;
			border: 0;
			font-size:24upx;
			&.button-hover2{
				background-color: #e6e6e6;
			}
		}
	}
    .setting_btn{
        width: 90%;
        height: 90px;
        font-size: 24px;
        color: #3A1B04;
        border: none;
        text-align: center;
        line-height: 90px;
        background: #FFD11A;
        border-radius:10px;
        margin-left: 5%;
        margin-top: 60px;
    }
</style>
